<template>
  <div class="keyboard-warp" :class="{'popover-keyboard':isPopover}" :style="keyboardStyle" v-show="show">
    <button @click="input(1)">1</button>
    <button @click="input(2)">2</button>
    <button @click="input(3)">3</button>
    <button @click="input(4)">4</button>
    <button @click="input(5)">5</button>
    <button @click="input(6)">6</button>
    <button @click="input(7)">7</button>
    <button @click="input(8)">8</button>
    <button @click="input(9)">9</button>
  </div>
</template>
<script>
export default {
  props: {
    // 是否弹窗模式
    isPopover: {
      type: Boolean,
      default: false
    },
    // 是否显示弹窗
    showPopover: {
      type: Boolean,
      default: false
    },
    // 弹窗出现的位置
    popoverPosition: {
      default: 'right',
      validator (value) {
        return ['top', 'right', 'left', 'bottom'].indexOf(value) !== -1
      }
    },
    // 绑定指令元素的Rect对象
    directiveRect: {
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      index: 0,
      // 当前元素的Rect
      elRect: {
        width: 0,
        height: 0
      }
    }
  },
  watch: {
    show () {
      this.$nextTick(() => {
        this.elRect = this.$el.getBoundingClientRect()
      })
    }
  },
  computed: {
    // 是否显示弹窗
    show () {
      if (!this.isPopover) return true
      return this.showPopover
    },
    // 样式
    keyboardStyle () {
      if (!this.isPopover) return {}
      if (!this.showPopover) return {}
      switch (this.popoverPosition) {
        case 'left':
          return {
            top: `${this.directiveRect.top - this.elRect.height / 2 + this.directiveRect.height / 2}px`,
            left: `${this.directiveRect.left - 4}px`,
            transform: `translate(-100%)`
          }
        case 'top':
          return {
            top: `${this.directiveRect.top - 4}px`,
            left: `${this.directiveRect.left - this.elRect.width / 2 + this.directiveRect.width / 2}px`,
            transform: `translate(0, -100%)`
          }
        case 'right':
          return {
            top: `${this.directiveRect.top - this.elRect.height / 2 + this.directiveRect.height / 2}px`,
            left: `${this.directiveRect.left + this.directiveRect.width + 4}px`
          }
        case 'bottom':
          return {
            top: `${this.directiveRect.top + this.directiveRect.height + 4}px`,
            left: `${this.directiveRect.left - this.elRect.width / 2 + this.directiveRect.width / 2}px`
          }
      }
    }
  },
  methods: {
    // 是否点击我自己的元素
    isMineElement (ele) {
      return this.$el.contains(ele)
    },
    // 得到输入框
    getInput () {
      if (window.focusInput && document.contains(window.focusInput) && window.focusInput.style.display !== 'none') {
        return window.focusInput
      } else {
        let allInput = document.querySelectorAll(`textarea,input[type=text],input[type=password],input[type=email],input[type=tel],input[type=url],input[type=number]`)
        return allInput.find(item => item.style.display !== 'none')
      }
    },
    // 輸入
    input (val) {
      let input = this.getInput()
      if (!input) return
      input.focus()
      input.value = `${input.value}${val}`
      let e = document.createEvent('HTMLEvents')
      e.initEvent('input', true, true)
      input.dispatchEvent(e)
    }
  }
}
</script>
<style lang="less" scoped>
  .keyboard-warp{
    background-color: #f00;
    width: 20px;
    &.popover-keyboard{
      position: fixed;
    }
  }
</style>
